<template>
  <div class="category-second">
    <v-title :title="title" />
    <loading :show="loading" />
    <arrow />
    <ul class="list">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="list-item"
        @click="$router.push(`/product/category-product-list/${item.id}`)"
      >
        <div class="image" v-if="item.image && item.image.thumbnail_path">
          <img v-lazy="item.image.thumbnail_path" />
        </div>
        <div class="name">{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
export default {
  name: 'CategorySecond',
  components: {
    'v-title': Title,
    Loading,
    Arrow
  },
  data() {
    return {
      loading: false,
      originList: [],
      list: [],
      title: '',
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      }
    }
  },
  methods: {
    getList() {
      if (this.queryList.busy === false) {
        this.loading = true
        const id = this.$route.params.id
        api.Product.categoryByParent({ parent_id: id, name: true }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.list = [...data.list]
          this.title = data.name
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    // this.getList()
  },
  activated () {
    this.getList()
  },
  deactivated () {
    this.list = []
  }
}
</script>

<style scoped lang="stylus">
.category-second
  padding-top 45px
  .list
    margin 10px
    display flex
    flex-wrap wrap
    justify-content space-between
    .list-item
      padding 10px
      border-radius 10px
      background white
      margin-bottom 10px
      width calc(50% - 5px)
      box-sizing border-box
      display flex
      flex-direction column
      justify-content space-between
      .image
        padding 10px
      .name
        font-weight 700
        font-size 14px
        line-height 1.3em
</style>
